<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" content="ie=edge"/>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>业务后台系统</title>
 <link href="${base}/css/frame/htindex.css" rel="stylesheet" type="text/css">
 <%@ include file="/common/layui.jsp"%>

</head>

<body>
<script>
    $(function () {
       var height = ($(window).height()-20-15)/2;
        $(".layui-card").height(height);
    });

    $.fn.extend({
        Scroll: function(opt, callback) {
            //参数初始化
            if (!opt) var opt = {};
            var _this = this.eq(0).find("ul:first");
            var lineH = _this.find("li:first").height(), //获取行高
                line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
                speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒）
                timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）

            if (line == 0) line = 1;
            var upHeight = 0 - line * lineH;
            //滚动函数
            scrollUp = function() {
                _this.animate({
                    marginTop: upHeight
                }, speed, function() {
                    for (i = 1; i <= line; i++) {
                        _this.find("li:first").appendTo(_this);
                    }
                    _this.css({
                        marginTop: 0
                    });
                });
            }
            //鼠标事件绑定
            _this.hover(function() {
                clearInterval(timerID);
            }, function() {
                timerID = setInterval("scrollUp()", timer);
            }).mouseout();
        }
    })
    $(function() {
        $('#tixing').append('<iframe src="${base}/system/msg"  width="100%" height="'+($('#p2').height()-$('.layui-card-header').height()-12)+'px"  frameborder="0"></iframe>');
        /*
        $('#tixing').Scroll({
            line: 1,
            speed: 500,
            timer: 1500
        });*/
    });
</script>
<style>
    .donate_bar {
        margin-left:30px;
        padding:0;
        line-height:25px;
    }
    .donate_bar li {
        height:25px;
        list-style:none;
        margin:0;
        padding:0;
    }
    .donate_bar span {
        font-size:8px;
        color:royalblue;
        margin-left:0;
    }
    .donate_bar a {
        text-decoration:none;
        font-size:14px;
        color:#666;
    }

</style>
<div style="padding: 10px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15" >
        <div class="layui-col-md6"  >
            <div class="layui-card" id="p1">
                <div class="layui-card-header">代办任务</div>
                <div class="layui-card-body">
                    xxxx
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">我的任务</div>
                <div class="layui-card-body">
                    xxxxx
                </div>
            </div>
        </div>
        <div class="layui-col-md6"  >
            <div class="layui-card" id="p2">
                <div class="layui-card-header">提醒消息</div>
                <div class="layui-card-body">
                    <div id="tixing" style="height:100%;overflow:hidden;">

                        <!--
                        <ul class="donate_bar">
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A1] 还剩5天 即将被释放,请及时回访</a> </li>
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A2] 还剩4天 即将被释放,请及时回访</a> </li>
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A3] 还剩3天 即将被释放,请及时回访</a> </li>
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A4] 还剩3天 即将被释放,请及时回访</a> </li>
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A5] 还剩3天 即将被释放,请及时回访</a> </li>
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A6] 还剩3天 即将被释放,请及时回访</a> </li>
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A7] 还剩3天 即将被释放,请及时回访</a> </li>
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A8] 还剩3天 即将被释放,请及时回访</a> </li>
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A9] 还剩3天 即将被释放,请及时回访</a> </li>
                            <li> <span class="glyphicon glyphicon-play"></span> <a href="">客户[A10] 还剩3天 即将被释放,请及时回访</a> </li>
                        </ul>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">公告新闻</div>
                <div class="layui-card-body">
                    xxxxxxx
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['element', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;

    });
</script>
</body>
</html>